<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 目的：引入箭头函数的目的是更简短的函数写法并且不绑定this，箭头函数的语法比函数表达式更简洁
    // 使用场景：箭头函数更适用于那些本来需要匿名函数的地方

    // 1.箭头函数属于表达式函数，因此不存在函数提升
    // 2.箭头函数只有一个形参的时候，可以省略小括号()
    // 3.箭头函数函数体只有一含代码时可以省略大括号{}，并自动作为返回值被返回
    // 4.加括号的函数体返回对象字面量

    // 以前普通函数表达式
    // const fn = function () {
    //   console.log(123)
    // }
    // fn()

    // 1.箭头函数 基本语法
    // const fn = () => {
    //   console.log(123)
    // }
    // fn()  //123

    // 参数
    // const fn = (x, y) => {
    //   console.log(x, y)
    // }
    // fn(1, 2)   // 1 2


    // 2.只有一个形参的时候，可以省略小括号() ，俩个及以上形参必须要加小括号
    // const fn = x => {
    //   console.log(x)
    // }
    // fn(1)   // 1


    // 3.只有一行代码的时候，可以省略大括号{}
    // const fn = x => console.log(x)
    // fn(1)   // 1


    // 4.只有一行代码的时候，可以省略return
    // const fn = x => x + x
    // console.log(fn(1))   // 2

    // 现在我们可以看懂这行代码了
    // function(e) {e.preventDefault()}  <=>  e => e.preventDefault()


    // 5.箭头函数可以直接返回 一个对象（但是对象要求必须加小括号）
    // const fn = (uname) => ({ uname: uname })
    // console.log(fn('刘德华'))  // {uname: '刘德华'}
  </script>
</body>

</html>